
<template>
    <div>
        <el-row>
            <el-col :span="24"> {{message}} </el-col>
        </el-row>
        <el-row>
            <el-col :span="24"><canvas id="canvas"></canvas></el-col>
        </el-row>
        <el-row>
            <el-col :span="8"><el-input v-model="orderId"/> </el-col>
            <el-col :span="4"><el-button type="primary" @click="genWorkerIds()">Idworker生成</el-button></el-col>
        </el-row>
        <el-row>
            <el-col :span="4"><el-input v-model="totalFee"/></el-col>
            <el-col :span="4"><el-input v-model="body"/></el-col>
            <el-col :span="4"><el-button type="primary" @click="unifiedOrders()">微信支付</el-button></el-col>
        </el-row>
        <el-row>
            <el-col :span="8"><span> {{trade_state_desc}}</span></el-col>
            <el-col :span="4"><el-button type="primary" @click="orderQuerys()">支付状态查询</el-button></el-col>
        </el-row>
    </div>
</template>

<script>
import QRCode from 'qrcode'
import axios from "axios";
import {genWorkerId,unifiedOrder,orderQuery} from "../../../api/wxpay/pay.js"
export default {
    data(){
        return{
            totalFee:1,
            orderId:0,
            body:'测试',
            message:'',
            code_url:'',
            trade_state_desc:''
        }
    },
    methods:{
        genWorkerIds(){
          genWorkerId().then(res=>{
            if(res){
              this.orderId = res.data;
            }
          })
        },
        unifiedOrders(){
          unifiedOrder(this.orderId,48,this.body).then(res=>{
            if(res){
              debugger
              this.code_url = res.data;
              this.createQRcode();
            }else{
              this.message = res.data;
            }

          })

        },
        orderQuerys(){
            orderQuery(this.orderId).then(res=>{
               //debugger
               if(res.success){
                    this.trade_state_desc = res.data;
                }else{
                    this.message = res.data;
                }
            })
        },
        createQRcode(){
            var canvas = document.getElementById('canvas');
            //debugger
            QRCode.toCanvas(canvas, this.code_url, (error)=> {
                if (error) {
                    console.error(error)
                }else{
                    console.log('success!');
                }
            });
        }

    }
    ,
    mounted(){
        this.genWorkerIds();
    }
}
</script>

